<script setup lang="ts">
  import { computed, defineAsyncComponent, PropType, ref, watch } from 'vue'
  import { Edit } from '@element-plus/icons-vue'
  import { cloneDeep } from 'lodash-es'
  import { CustomFieldRender } from '@/components/pages/order/detail/pages/body/order-info/types'
  import FilePreviewList from '@/components/common/file-preview/List.vue'

  const UpdateOrderInfoModal = defineAsyncComponent(() => import('./UpdateOrderInfoModal.vue'))

  defineOptions({
    name: 'OrderInfoOrderDetail',
  })

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  /**
   * 获取分类渲染文本
   */
  const getFaultTypeRenderText = computed(() => {
    let result = ''

    if (props.orderDetail.fault) {
      result = props.orderDetail.fault.filter((item) => item !== '0').join('、')
    }

    return result
  })

  // 更新工单信息弹窗显示状态
  const updateOrderInfoModalVisible = ref(false)

  // 设备故障图
  const goodFaultImg = computed(() => {
    const result = props.orderDetail.workImages.find((item) => item.type === 3)
    if (result && result.image) {
      return result.image
    }
    return ''
  })

  // 设备故障图
  const goodCodeImg = computed(() => {
    const result = props.orderDetail.workImages.find((item) => item.type === 4)
    if (result && result.image) {
      return result.image
    }
    return ''
  })

  // 地址渲染文本
  const getAddress = computed(() => {
    let result: Array<string> = []
    if (props.orderDetail) {
      result.push(props.orderDetail.province)
      result.push(props.orderDetail.city)
      result.push(props.orderDetail.area)
      result.push(props.orderDetail.town)
      result.push(props.orderDetail.address)
    }
    return result.join('')
  })

  /**
   * 自定义字段渲染结构，为了方便更改样式
   */
  const customFieldRender = ref<CustomFieldRender>({
    txt: [],
    rate: [],
    file: [],
  })

  /**
   * 工单信息更新事件
   */
  const onUpdate = () => {
    emits('update')
  }

  watch(
    props,
    (value) => {
      if (value.orderDetail) {
        customFieldRender.value.txt = []
        customFieldRender.value.file = []
        customFieldRender.value.rate = []
        value.orderDetail.orderCustomFields.forEach((field) => {
          if ([1, 2, 3, 4, 9, 10].includes(field.type)) {
            customFieldRender.value.txt.push(cloneDeep(field))
          }
          if (field.type === 8) {
            customFieldRender.value.rate.push(cloneDeep(field))
          }
          if ([5, 6, 7].includes(field.type)) {
            customFieldRender.value.file.push(cloneDeep(field))
          }
        })
      }
    },
    { immediate: true, deep: true },
  )
</script>

<template>
  <div class="order_detail_order_info">
    <div class="title">
      工单信息
      <template v-if="[1, 2, 3].includes(props.orderDetail.status)">
        <el-tooltip content="修改工单信息" placement="top" effect="light">
          <div
            v-permission="'order_update'"
            style="
              display: flex;
              align-items: center;
              font-size: 12px;
              font-weight: normal;
              color: #007cff;
              cursor: pointer;
            "
            @click="updateOrderInfoModalVisible = true"
          >
            <el-icon color="#007cff" size="16">
              <Edit />
            </el-icon>
            修改
          </div>
        </el-tooltip>
      </template>
    </div>
    <div class="info_list">
      <div class="text">
        <div class="info_item">
          <span style="color: #606266">报单时间：</span>{{ props.orderDetail.createTime }}
        </div>
        <div class="info_item">
          <span style="color: #606266">工单来源：</span>{{ props.orderDetail.workSource }}
        </div>
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">工单客服</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.emp }}</div>
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">工单分类</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.orderType }}</div>
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">处理方式</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.orderWay }}</div>
          </div> -->
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">派单时间：</span>
          {{ props.orderDetail.dispatcOrderTime }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">处理类型：</span>
          {{
            props.orderDetail.faultType
              ? props.orderDetail.faultType.map((item) => item.oneFaultType).join('、')
              : ''
          }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">分类：</span>
          {{ getFaultTypeRenderText }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">详情：</span>
          {{ (props.orderDetail.faultReason?.map((item) => item.reason) || []).join('、') }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">解决措施：</span>
          {{ (props.orderDetail.solution || []).join('、') }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">工单描述：</span>
          {{ props.orderDetail.content || '' }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">项目名称：</span>
          {{ props.orderDetail.project }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">是否为工作日：</span>
          {{ props.orderDetail.isWorkDay ? '是' : '否' }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">收件人：</span>
          {{ props.orderDetail.addressee }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">收件人联系方式：</span>
          {{ props.orderDetail.addresseePhone }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">收件地址：</span>{{ getAddress }}
        </div>
        <div class="info_item">
          <span style="color: #606266; white-space: nowrap">服务日期：</span>
          {{ props.orderDetail.serviceDate }}
        </div>
        <div v-for="(item, index) in customFieldRender.txt" :key="index" class="info_item">
          <span style="color: #606266; white-space: nowrap">{{ item.name || '' }}：</span>
          {{ item.val.join('、') || '' }}
        </div>
        <div v-for="(item, index) in customFieldRender.rate" :key="index" class="info_item">
          <span style="color: #606266; white-space: nowrap">{{ item.name || '' }}：</span>
          {{ Number(item.val[0]) / 2 }}
        </div>
      </div>
    </div>

    <!-- 只包含工单图片、设备故障图、设备序列号图 -->
    <div class="image-list-container">
      <div v-if="goodFaultImg" class="info-item">
        <div class="label"> 故障图片: </div>
        <div class="value good-fault-img">
          <h-image
            :src="goodFaultImg"
            :width="80"
            :height="50"
            fit="contain"
            :padding="2"
            :show-del-btn="false"
          />
        </div>
      </div>
      <div v-if="goodCodeImg" class="info-item">
        <div class="label"> 序列号图: </div>
        <div class="value good-fault-img">
          <h-image
            :src="goodCodeImg"
            :width="80"
            :height="50"
            fit="contain"
            :padding="2"
            :show-del-btn="false"
          />
        </div>
      </div>
      <div class="info-item">
        <div class="label"> 工单图片: </div>
        <div class="file_list">
          <file-preview-list :file-list="orderDetail.orderImages" />
        </div>
      </div>
    </div>

    <div class="file">
      <div
        v-for="(field, fieldIndex) in customFieldRender.file"
        :key="fieldIndex"
        class="info_item"
      >
        <div class="label">
          {{ field.name || '' }}
          <div class="middle">:</div>
        </div>
        <div class="file_list">
          <file-preview-list
            :file-list="field.val"
            :file-type="field.type === 5 ? 'img' : field.type === 6 ? 'pdf' : 'video'"
          />
        </div>
      </div>
    </div>

    <update-order-info-modal
      v-model:visible="updateOrderInfoModalVisible"
      :order-id="props.orderDetail.id"
      @update="onUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
  .order_detail_order_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    .info_list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 9px;

      .text {
        display: flex;
        flex-wrap: wrap;
        row-gap: 12px;
        column-gap: 64px;

        .info_item {
          display: flex;
          gap: 5px;
          width: 260px;

          .label {
            color: #606266;
            display: flex;
            height: 18px;
            line-height: 18px;
            white-space: nowrap;

            .txt {
              text-align: right;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              cursor: pointer;
            }

            .middle {
              width: 3px;
            }
          }

          .value {
            width: 204px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            height: 18px;
            line-height: 18px;
          }

          .good-fault-img {
            height: 50px;
          }
        }
      }
    }

    .image-list-container {
      display: flex;
      padding-left: 9px;
      column-gap: 64px;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          color: #606266;
          white-space: nowrap;
          text-align: right;
        }

        .value {
          width: 204px;
        }
      }
    }

    .file {
      display: flex;
      flex-wrap: wrap;
      column-gap: 100px;
      row-gap: 12px;
      padding-left: 9px;

      .info_item {
        display: flex;
        gap: 5px;

        .label {
          color: #606266;
          display: flex;
          height: 18px;
          line-height: 18px;

          .txt {
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
          }

          .middle {
            width: 3px;
          }
        }
      }
    }

    .file_list {
      max-width: 480px;
      min-width: 480px;
      display: flex;
      gap: 5px;

      .arrow {
        min-width: 24px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.4s ease;
      }

      .enabled_arrow {
        cursor: pointer;
        border: 1px solid #ebeef5;
        transition: all 0.4s;

        .iconfont {
          color: $primaryColor;
          transition: all 0.4s;
        }

        &:hover {
          border-color: $primaryColor;
          background-color: $primaryColor;

          .iconfont {
            color: #fff;
          }
        }
      }

      .disabled_arrow {
        cursor: not-allowed;
        border: 1px solid #ebeef5;

        .iconfont {
          color: #ebeef5;
        }
      }

      .list {
        width: 420px;
        overflow: hidden;

        .list_content {
          display: flex;
          gap: 5px;
          transition: all 0.4s ease;

          .file {
            width: 80px;
            height: 50px;
          }
        }
      }
    }
  }
  .field_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32px;
    row-gap: 18px;
    column-gap: 70px;

    .el-form-item {
      margin: 0;

      .el-form-item__label {
        height: 28px;
        line-height: 28px;
      }

      .el-form-item__content {
        flex-direction: column;
        align-items: flex-start;

        .el-input {
          width: 258px;
        }

        .el-textarea {
          width: 258px;
        }

        .el-checkbox-group {
          height: 28px;
          display: flex;
          column-gap: 12px;

          .el-checkbox {
            height: 28px;
            margin: 0;
            column-gap: 5px;

            .el-checkbox__label {
              padding: 0;
              font-size: 12px;
            }
          }
        }

        .el-radio-group {
          height: 28px;
          display: flex;
          column-gap: 12px;

          .el-radio {
            height: 28px;
            margin: 0;
            column-gap: 5px;

            .el-radio__label {
              height: 14px;
              line-height: 14px;
              padding: 0;
            }
          }
        }

        .upload_file {
          width: 258px;
          display: flex;
          flex-direction: column;
          row-gap: 8px;

          .el-upload {
            .el-upload-dragger {
              padding: 0;
              height: 72px;
              background: none;
              border: none !important;
              display: flex;
              align-items: center;

              .iconfont {
                font-size: 72px;
                color: #fff;
              }
            }
          }

          .file_list {
            display: flex;
            flex-wrap: wrap;
            column-gap: 11px;
            row-gap: 8px;

            .file_item {
              width: 56px;
              list-style: none;
              display: flex;
              flex-direction: column;
              column-gap: 2px;
            }
          }
        }

        .el-form-item__error {
          margin: 0;
        }
      }
    }
  }
</style>
